<template>
  <div class="look">
    <p>{{ selectName }}</p>
    <div class="box" :style="style">报警</div>
    <div class="meau">
      <div
        v-for="item in listData"
        :key="item"
        class="tab"
        :style="table(item)"
        @click="selectName = item"
      >
        {{ item }}
      </div>
    </div>
    <a-button type="primary" @click="add(10)">++</a-button>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const state = reactive({
      name: 1,
      age: 123,
      listData: ["tab1", "tab2", "tab3", "登录"],
      box: null,
      selectName: "tab1",
    });
    const router = useRouter();
    const style = computed(() => {
      if (state.name > 10) {
        return { background: "red" };
      }
      return { background: "#000" };
    });
    const table = computed(() => (value: string) => {
      return value === state.selectName ? { background: "red" } : { background: "#000" };
    });

    const add = (value: number) => {
      state.name += value;
    };
    watch(
      state,
      (a, b) => {
        if (state.selectName === "登录") {
          router.push("/edit");
        }
      },
      { deep: true, immediate: true }
    );
    return { ...toRefs(state), add, style, table };
  },
});
</script>
<style lang="less" scoped>
.look {
  width: 100vw;
  height: 100vh;
}
.box {
  width: 40px;
  height: 40px;
  color: #fff;
  background-color: #222;
}
.red {
  width: 40px;
  height: 40px;
  color: #fff;
  background-color: red;
}
.tab {
  width: 100px;
  height: 100px;
  line-height: 100%;
  color: #fff;
  background-color: #ccc;
  margin-left: 20px;
}
.meau {
  display: flex;
}
</style>
